<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, reactive, ref, watchEffect } from 'vue'
	import * as util from '@/amtf/utils'
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const 备注 = ref('')

	// 页面参数
	const { zhijiemai, zaici } = defineProps({
		zhijiemai: String,
		zaici: String
	})
	import { storeToRefs } from 'pinia'
	import use购物车 from "@/stores/use购物车.js"
	const 购物车 = use购物车()
	const { 选中组, 选中金额, 直接下单项 } = storeToRefs(购物车)

	import { 商品下单展示 } from "@/utils/商品util.js"
	import useapi from '@/api/订单api'
	const api = useapi()

	const 订单 = reactive({})
	const 初始化 = async () => {
		if (zhijiemai) {
			console.log('购物车: ', 购物车);
			订单.明细 = [直接下单项.value]
		} else if (zaici) {
			// 再次购买
			const res = await api.查({ id: zaici })
			console.log('查 res: ', res);
			util.对象重予(订单, res.data)
			delete 订单.id
			for (let 明细 of 订单.明细) {
				delete 明细.id
			}
			// 商品下单展示(订单.明细)
			console.log('订单: ', 订单);
		} else {
			// 购物车过来的
			// const res = await getMemberOrderPreAPI()
			// console.log('选中金额.value: ',选中金额.value);
			订单.明细 = 选中组.value
			订单.购物车ids = 选中组.value.map((item) => item.id)
		}
	}

	onLoad(() => {
		初始化()
	})

	watchEffect(() => {
		if (Object.keys(订单) == 0) return
		商品下单展示(订单.明细)
		订单.商品总价 = 订单.明细?.reduce((sum, item) => sum + item.数量 * item.价格, 0)
		订单.商品总价展示 = 订单.商品总价.toFixed(2);
		订单.运费 = Number(订单.运费 || 0)
		订单.运费展示 = 订单.运费.toFixed(2);
		订单.总价 = 订单.商品总价 + 订单.运费
		订单.总价展示 = 订单.总价.toFixed(2);
	})


	import use地址 from '@/stores/use地址'
	const addressStore = use地址()
	const { 选中地址 } = storeToRefs(addressStore)

	const 提交 = async () => {
		// 没有收货地址提醒
		if (!选中地址.value?.id) {
			return uni.showToast({ icon: 'none', title: '请选择收货地址' })
		}
		let 地址过滤 = util.成对象_排除属性(选中地址.value)
		console.log('地址过滤: ', 地址过滤);
		// 发送请求
		Object.assign(订单, {
			...地址过滤,
			备注: 备注.value,
		})
		const res = await api.增(订单)
		if (res.code == 0) {
			// 关闭当前页面，跳转到订单详情，传递订单id
			uni.redirectTo({ url: `/pagesOrder/detail/detail?id=${res.data.id}` })
		} else {
			console.log('出错了 res: ', res);
		}
	}
</script>

<template>
	<scroll-view enable-back-to-top scroll-y class="viewport">
		<!-- 收货地址 -->
		<navigator v-if="选中地址" class="shipment" hover-class="none" url="/pagesMember/address/address?from=order">
			<view class="user"> {{ 选中地址.收件姓名 }} {{ 选中地址.收件电话 }} </view>
			<view class="address"> {{ 选中地址.收件省市县 }} {{ 选中地址.收件详细地址 }} </view>
			<text class="icon icon-right"></text>
		</navigator>
		<navigator v-else class="shipment" hover-class="none" url="/pagesMember/address/address?from=order">
			<view class="address"> 请选择收货地址 </view>
			<text class="icon icon-right"></text>
		</navigator>
		<!-- 商品信息 -->
		<view class="goods navigator-flex">
			<navigator v-for="item in 订单?.明细" :key="item.商品id" :url="`/pages/goods/detail?id=${item.商品id}`" class="item"
				hover-class="none">
				<image class="picture" :src="item.图片" />
				<view class="meta">
					<view class="name ellipsis"> {{ item.名称 }} </view>
					<view class="attrs">{{ item.配置 }}</view>
					<view class="prices">
						<view class="pay-price symbol">{{ item.价格 }}</view>
					</view>
					<view class="count">数量:{{ item.数量 }}</view>
				</view>
			</navigator>
		</view>

		<!-- 配送及支付方式 -->
		<view class="related">
			<view class="item">
				<text class="text">订单备注</text>
				<input class="input" :cursor-spacing="30" placeholder="选填，建议留言前先与商家沟通确认" v-model="备注" />
			</view>
		</view>

		<!-- 支付金额 -->
		<view class="settlement">
			<view class="item">
				<text class="text">商品总价: </text>
				<text class="number symbol">{{ 订单?.商品总价展示 }}</text>
			</view>
			<view class="item">
				<text class="text">运费: </text>
				<text class="number symbol">{{ 订单?.运费展示}}</text>
			</view>
		</view>
	</scroll-view>

	<!-- 吸底工具栏 -->
	<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
		<view class="total-pay symbol">
			<text class="number">{{ 订单?.总价展示 }}</text>
		</view>
		<view class="button" :class="{ disabled: !选中地址?.id }" @tap="提交">
			提交
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.symbol::before {
		content: '¥';
		font-size: 80%;
		margin-right: 5rpx;
	}

	.shipment {
		margin: 20rpx;
		padding: 30rpx 30rpx 30rpx 84rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png) 20rpx center / 50rpx no-repeat #fff;
		position: relative;

		.icon {
			font-size: 36rpx;
			color: #333;
			transform: translateY(-50%);
			position: absolute;
			top: 50%;
			right: 20rpx;
		}

		.user {
			color: #333;
			margin-bottom: 5rpx;
		}

		.address {
			color: #666;
		}
	}

	.goods {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			padding: 30rpx 0;
			border-top: 1rpx solid #eee;

			&:first-child {
				border-top: none;
			}

			.picture {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrs {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 6rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.prices {
				display: flex;
				align-items: baseline;
				margin-top: 6rpx;
				font-size: 28rpx;

				.pay-price {
					margin-right: 10rpx;
					color: #cf4444;
				}

				.price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.count {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 26rpx;
				color: #444;
			}
		}
	}

	.related {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 80rpx;
			font-size: 26rpx;
			color: #333;
		}

		.input {
			flex: 1;
			text-align: right;
			margin: 20rpx 0;
			padding-right: 20rpx;
			font-size: 26rpx;
			color: #999;
		}

		.item .text {
			width: 125rpx;
		}

		.picker {
			color: #666;
		}

		.picker::after {
			content: '\e6c2';
		}
	}

	/* 结算清单 */
	.settlement {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			font-size: 26rpx;
			color: #333;
		}

		.danger {
			color: #cf4444;
		}
	}

	/* 吸底工具栏 */
	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		background-color: #fff;
		height: 100rpx;
		padding: 0 20rpx;
		border-top: 1rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: content-box;

		.total-pay {
			font-size: 40rpx;
			color: #cf4444;

			.decimal {
				font-size: 75%;
			}
		}

		.button {
			width: 220rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 26rpx;
			color: #fff;
			border-radius: 72rpx;
			background-color: #27ba9b;
		}

		.disabled {
			opacity: 0.6;
		}
	}
</style>